<template>
  <div class="el-infinite-scroll">
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
    >
      <ul>
        <li
          v-for="item in dataList"
          :key="item"
        >{{item}}</li>
      </ul>
      <div>加载中</div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      busy: false
    }
  },
  methods: {
    loadMore() {
      console.log(111)
      this.busy = true
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.dataList.push(new Date().getTime() + i)
        }
        this.busy = false
      }, 1000)
    }
  }
}
</script>

<style scoped>
.el-infinite-scroll {
  height: 100vh;
}
</style>
